<template>
    <div>
        <div class="home-layout-A m-top-70">
            <div class="home-layout-A-left">
                <div class="home-title-A">
                    为您推荐
                    <span class="huan" @click="recommendedDisplay()">换一换<img src="../../assets/img/hyh.jpg" alt=""></span>
                </div>
                <div class="recommend-list">
                    <ul>
                        <li v-for="(item,index) in tuiJianList" :key="index">
                            <a @click="detailLink(item)">
                                <div class="recommend-img">
                                    <img :src="$imgPath(item.headImg)">
                                    <label>
                                        <!-- <span class="tip1">声甜貌美</span> -->
                                        <span class="tip2">{{item.secondName}}</span>
                                    </label>
                                </div>
                                <div class="recommend-view">
                                    <div class="recommend-view-title">
                                        <span>{{item.userName}}</span>
                                    </div>
                                    <!-- <div class="recommend-view-msg">
                                        <i class="she nan" v-if="item.sex == 1">{{item.age}}</i>
                                        <i class="she nv" v-else-if="item.sex == 2">{{item.age}}</i>
                                        <i class="she unknown" v-else>{{item.age}}</i>
                                        <label class="price">￥<span>{{item.price}}/</span>{{item.priceUnit}}</label>
                                    </div> -->
                                    <div class="recommend-view-status">
                                        <label class="game">{{item.serverName}}</label>
                                        <label class="priceIndex">￥<span>{{item.price}}/</span>{{item.priceUnit}}</label>
                                        <!-- <label class="ok">{{item.onlineStatus == 0 ? '在线' : '下线'}}</label> -->
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="home-layout-A-right" v-if="caifuList.length > 0">
                <ul class="wealth-charm">
                    <li v-for="(item,index) in tabList" :key="index" @click="tabIndex = index,foundList(index)"><a :class="[index == tabIndex ? 'active' : '']">{{item}}</a></li>
                </ul>
                <div class="wealth-list">
                    <div class="top-three">
                        <ul>
                            <li>
                                <div class="top-three-B" @click="goDetail(caifuList[1])">
                                    <img :src="$imgPath(caifuList[1].headImg)">
                                </div>
                                <h2 class="name" :title="caifuList[1].nickName">{{caifuList[1].nickName!=null&&caifuList[1].nickName.length > 6 ? caifuList[1].nickName.substring(0,6) : caifuList[1].nickName}}</h2>
                                <p class="GX" v-if="tabIndex == 0">贡献值:{{caifuList[1].wealth}}</p>
                                <p class="GX" v-else>人气值:{{caifuList[1].popularity}}</p>
                            </li>
                            <li>
                                <div class="top-three-A" @click="goDetail(caifuList[0])">
                                    <img :src="$imgPath(caifuList[0].headImg)">
                                </div>
                                <h2 class="name" :title="caifuList[0].nickName">{{caifuList[0].nickName!=null&&caifuList[0].nickName.length > 6 ? caifuList[0].nickName.substring(0,6) : caifuList[0].nickName}}</h2>
                                <p class="GX" v-if="tabIndex == 0">贡献值:{{caifuList[0].wealth}}</p>
                                <p class="GX" v-else>人气值:{{caifuList[0].popularity}}</p>
                            </li>
                            <li>
                                <div class="top-three-C" @click="goDetail(caifuList[2])">
                                    <img :src="$imgPath(caifuList[2].headImg)">
                                </div>
                                <h2 class="name" :title="caifuList[2].nickName">{{caifuList[2].nickName!=null&&caifuList[2].nickName.length > 6 ? caifuList[2].nickName.substring(0,6) : caifuList[2].nickName}}</h2>
                                <p class="GX" v-if="tabIndex == 0">贡献值:{{caifuList[2].wealth}}</p>
                                <p class="GX" v-else>人气值:{{caifuList[2].popularity}}</p>
                            </li>
                        </ul>
                    </div>
                    <ul class="ranking-list">
                        <div v-for="(item,index) in caifuList" :key="index">
                            <li v-if="index > 2">
                                <div class="ranking">
                                    <p>{{index}}</p>
                                </div>
                                <div class="ranking-user" @click="goDetail(item)">
                                    <img :src="$imgPath(item.headImg)">
                                </div>
                                <div class="ranking-stu">
                                    <label class="name">
                                        {{item.nickName}}
                                        <span class="ranking-numb" v-if="tabIndex == 0">贡献值:{{item.wealth}}</span>
                                        <span class="ranking-numb" v-else>人气值:{{item.popularity}}</span>
                                    </label>
                                </div>
                            </li>
                        </div>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            tuiJianList:[],     // 为您推荐列表
            caifuList:[],       // 财富
            tabList:['财富榜','人气榜'],
            tabIndex:0,
            isService:false  //是否有服务
        }
    },
    mounted(){
        this.recommendedDisplay()
        this.getUserCreditWealthRanking()
    },
    methods:{
        //人气榜跳转到陪玩主页
        goDetail(item){
            // if(this.tabIndex==1){
            //     if(this.isService==true){
                    
            //     }else{
            //         this.$Message.info('该陪玩未开通服务')  
            //     }
                
            // } 
            if(this.tabIndex==1){
                let routeData = this.$router.resolve({
                    name:'detail',
                    params:{
                        userId:item.userId
                    },
                    query:{
                        serviceId:item.serviceId
                    }
                })
                window.open(routeData.href, '_blank')        
            }
        },
        foundList(index){
            if(index == 0){
                this.getUserCreditWealthRanking()
            }else{
                this.getUserCreditPopularityRanking()
            }
        },
        // 为您推荐
        recommendedDisplay(){
            let parmes = {
                size:6
            }
            apiHttp.apiIndex.recommendedDisplay(parmes,resp=>{
                if(resp.code == 200){
                    this.tuiJianList = resp.data
                }
            })
        },
        // 财富榜
        getUserCreditWealthRanking(){
            let params = {
                page:0,
                size:10
            }
            apiHttp.apiIndex.getUserCreditWealthRanking(params,resp=>{
                if(resp.code == 200){
                    this.caifuList = resp.data.pageVo.content
                }
            })
        },
        // 魅力榜（人气榜）
        getUserCreditPopularityRanking(){
            let params = {
                page:0,
                size:10
            }
            apiHttp.apiIndex.getUserCreditPopularityRanking(params,resp=>{  
                console.log("人气榜");
                console.log(resp);                              
                if(resp.code == 200){
                    this.caifuList = resp.data.pageVo.content;
                    // if(this.caifuList.serviceId==null||this.caifuList.serviceId==''||this.caifuList.serviceId==undefined){
                    //     this.isService = false;
                    // }else{
                    //     this.isService = true;
                    // }
                }
                console.log(this.caifuList); 
            })
        },
        // 跳转到详情页
        detailLink(item){
            let routeData = this.$router.resolve({
                name:'detail',
                params:{
                    userId:item.userId
                },
                query:{
                    serviceId:item.serverId
                }
            })
            window.open(routeData.href, '_blank')
        }
    }
}
</script>
<style scoped>
.recommend-view-status .game{
    width: auto;
}
</style>

